<template>
  <div class="index">
    <!-- 头部 -->
    <div class="index_top">
      <indexTop />
    </div>
    <!-- 中部 -->
    <div class="index_middle">
      <indexMiddle />
    </div>
    <!-- 底部 -->
    <div class="index_bottom">
      <indexBottom />
    </div>
  </div>
</template>

<script>
import indexTop from '../components/indexViews/indexTop.vue'
import indexMiddle from '../components/indexViews/indexMiddle.vue'
import indexBottom from '../components/indexViews/indexBottom.vue'
export default {
  name: "index",
  components: {
    indexTop,
    indexMiddle,
    indexBottom,
  },
  data () {
    return {

    }
  },
  methods: {

  }
}


</script>

<style lang="less" scoped>
.index {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.index .index_top {
  flex: 2;
}

.index .index_middle {
  flex: 10;
  background: rgb(249, 231, 230);
}

.index .index_bottom {
  flex: 1;
  background: rgb(249, 231, 230);
}
</style>
